<template>
    <div class="fair-detail f f-ac f-col">
        <Breadcrumb router />
        <div class="fair-detail-body">
            <div class="body-top">
                <Title :label="detail.title" :time="detail.createtime" />
                <div class="f f-ac f-jb mt-20">
                    <img :src="baseUrl+detail.image" class="detail-img" />
                    <div class="detail-info">
                        <div class="info-title line-1 mb-10">{{ detail.title || "-" }}</div>
                        <div class="row mb-10" v-if="typeList[detail.market_category_id]">产品分类：{{ typeList[detail.market_category_id].name || "-" }}</div>
                        <div class="row mb-10">发布时间：{{ detail.createtime || "-" }}</div>
                        <div class="row mb-10" v-if="detail.enterprise">发布企业：{{ detail.enterprise.name || "-" }}</div>
                        <div class="row mb-10" v-if="detail.enterprise">联系方式：{{ detail.enterprise.telphone|| "-" }}</div>
                        <div class="info-price">￥{{ detail.price || "-" }}</div>
                    </div>
                </div>
            </div>
            <div class="body-bottom mt-30">
                <My-btn label="赶大集详情" bg-color="line-blue" read-only />
                <!-- <video class="mt-30" :src="detail.video" :poster="detail.coverPath" controls /> -->
                <div class="body-content mt-20" v-html="detail.content" />
                <Action-bar :comment="detail.count" :like="detail.like" :collect="detail.collect" :type="3"
                    :is_like="detail.is_like" :is_collect="detail.is_collect" :id="detail.id" @like="handleLike" />
                <Comment :id="detail.id" @comfirm="handleComment" :type="3"/>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        marketDetail,marketCategory
    } from "@/utils/market/index.js";
    export default {
        data() {
            return {
                baseUrl: process.env.VUE_APP_BASE_API,
                typeList: [],
                detail: {},
            };
        },

        mounted() {},

        created() {
            this.detail.id = this.$route.query.id
            this.getDetails(this.detail.id);
            this.getTypeList();
        },
        methods: {
            // 获取赶大集分类
            getTypeList() {
                this.loading = true;
                let that = this
                marketCategory().then((response) => {
                    response.data.unshift({
                        id: '',
                        name: "全部",
                    });
                    that.typeList = response.data
                    that.loading = false;
                });
            },
            // 获取详情
            getDetails(id) {
                this.loading = true;
                let that = this
                marketDetail({ id }).then((response) => {
                    that.detail = response.data
                    that.loading = false;
                });
            },
            // 评论
            handleComment(v) {
                this.detail.comment = v;
            },
            // 点赞/收藏
            handleLike(v) {
                this.getDetails(v)
            }
        },
    };
</script>

<style lang="scss" scoped>
    .fair-detail {
        width: 100%;

        &-body {
            width: 1200px;

            .body-top {
                width: 100%;
                height: 439px;
                box-sizing: border-box;
                padding: 30px 0;
                border-bottom: 1px solid rgba(70, 110, 197, 0.2);

                .detail-img {
                    width: 633px;
                    height: 296px;
                }

                .detail-info {
                    width: 487px;
                    height: 245px;
                    position: relative;

                    .info-title {
                        color: #313131;
                        font-size: 24px;
                        font-weight: 600;
                        padding-bottom: 16px;
                        border-bottom: 1px dashed #a9a9aa;
                    }

                    .row {
                        color: #909090;
                        font-size: 16px;
                    }

                    .info-price {
                        color: #f00;
                        font-size: 34px;
                        font-weight: 600;
                        position: absolute;
                        left: 0;
                        bottom: 0;
                    }
                }
            }

            .body-bottom {
                video {
                    width: 100%;
                    height: 618px;
                    object-fit: cover;
                }

                .body-content {
                    word-break: break-all;
                    padding-bottom: 30px;
                    border-bottom: 1px dashed #d9d9d9;
                }
            }
        }
    }
</style>